<div>
    <div class="Prompt-selectedItem">
        <div class="Prompt-selectedItemInfo" ng-hide="(!promptData.launchConf.defaults.credentials || promptData.launchConf.defaults.credentials.length === 0) && promptData.prompts.credentials.value.length === 0">
            <div class="Prompt-selectedItemLabel">
                <span>{{:: vm.strings.get('prompt.SELECTED') }}</span>
            </div>
            <div class="Prompt-previewTags--outer">
                <div ng-show="promptData.launchConf.defaults.credentials && promptData.launchConf.defaults.credentials.length > 0 && promptData.prompts.credentials.value.length === 0" class="Prompt-noSelectedItem">{{:: vm.strings.get('prompt.NO_CREDENTIALS_SELECTED') }}</div>
                <div class="Prompt-previewTags--inner">
                    <span ng-repeat="credential in promptData.prompts.credentials.value">
                        <at-tag
                            ng-show="!readOnlyPrompts && promptData.launchConf.ask_credential_on_launch"
                            tag="credential.tag"
                            icon="{{ promptData.prompts.credentials.credentialTypes[credential.credential_type] }}"
                            remove-tag="vm.deleteSelectedCredential($index)">
                        </at-tag>
                        <at-tag
                            ng-show="readOnlyPrompts || !promptData.launchConf.ask_credential_on_launch"
                            tag="credential.tag"
                            icon="{{ promptData.prompts.credentials.credentialTypes[credential.credential_type] }}">
                        </at-tag>
                    </span>
                </div>
            </div>
            <div class="Prompt-previewTagRevert">
                <a class="Prompt-revertLink" href="" ng-show="vm.showRevertCredentials()" ng-click="vm.revert()">{{:: vm.strings.get('prompt.REVERT') }}</a>
            </div>
        </div>
    </div>
    <div ng-if="promptData.credentialTypeMissing && promptData.credentialTypeMissing.length > 0" class="Prompt-credentialTypeMissing">
        <div ng-repeat="missingCred in promptData.credentialTypeMissing">
            <span class="fa fa-warning"></span>&nbsp;{{:: vm.strings.get('prompt.CREDENTIAL_TYPE_MISSING', missingCred.label) }}
        </div>
    </div>
    <span>
        <div ng-if="preventCredsWithPasswords && (promptData.prompts.credentials.passwords.ssh_password || promptData.prompts.credentials.passwords.become_password || promptData.prompts.credentials.passwords.ssh_key_unlock || (promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0))">
            <div class="Prompt-credsWarning">
                <span class="fa fa-warning"></span>
                <span>{{ vm.strings.get('prompt.CREDENTIAL_PASSWORD_WARNING')}}</span>
            </div>
            <div class="Prompt-credsWarningList">
                <div ng-if="promptData.prompts.credentials.passwords.ssh_password || promptData.prompts.credentials.passwords.become_password || promptData.prompts.credentials.passwords.ssh_key_unlock">{{promptData.prompts.credentials.passwords.ssh_password.name || promptData.prompts.credentials.passwords.become_password.name || promptData.prompts.credentials.passwords.ssh_key_unlock.name}}</div>
                <div ng-if="promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0" ng-repeat="vaultCred in promptData.prompts.credentials.passwords.vault">{{vaultCred.name}}</div>
            </div>
        </div>
    </span>
    <span ng-show="promptData.launchConf.ask_credential_on_launch">
        <div class="Prompt-credentialSubSection">
            <span class="Prompt-label">{{:: vm.strings.get('prompt.CREDENTIAL_TYPE') }}:</span>
            <select id="launch-kind-select" ng-model="promptData.prompts.credentials.credentialKind">
                <option ng-repeat="option in promptData.prompts.credentials.credentialTypeOptions" value="{{option.value}}">{{option.name}}</option>
            </select>
        </div>
        <div id="prompt-credential"></div>
    </span>
    <div ng-show="!preventCredsWithPasswords && (promptData.prompts.credentials.passwords.ssh_password || promptData.prompts.credentials.passwords.become_password || promptData.prompts.credentials.passwords.ssh_key_unlock || (promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0))">
        <div class="Prompt-instructions">{{:: vm.strings.get('prompt.PASSWORDS_REQUIRED_HELP') }}</div>
        <form name="credentialPasswordsForm" autocomplete="off" novalidate>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.ssh_password">
                <label for="ssh_password" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.SSH_PASSWORD') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn input-group-prepend">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-ssh-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-ssh-password')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-ssh-password" type="password" ng-model="promptData.prompts.credentials.passwords.ssh_password.value" name="ssh_password" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.ssh_password.$dirty && credentialPasswordsForm.ssh_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="ssh_password_api_error"></div>
            </div>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.ssh_key_unlock">
                <label for="ssh_key_unlock" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.PRIVATE_KEY_PASSPHRASE') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn input-group-prepend">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-ssh-key-unlock_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-ssh-key-unlock')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-ssh-key-unlock" type="password" ng-model="promptData.prompts.credentials.passwords.ssh_key_unlock.value" name="ssh_key_unlock" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.ssh_key_unlock.$dirty && credentialPasswordsForm.ssh_key_unlock.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="ssh_key_unlock_api_error"></div>
            </div>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.become_password">
                <label for="become_password" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.PRIVILEGE_ESCALATION_PASSWORD') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn input-group-prepend">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-become-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-become-password')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-become-password" type="password" ng-model="promptData.prompts.credentials.passwords.become_password.value" name="become_password" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.become_password.$dirty && credentialPasswordsForm.become_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="become_password_api_error"></div>
            </div>
            <span ng-if="promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0">
                <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-repeat="vault_credential in promptData.prompts.credentials.passwords.vault track by $index">
                    <label for="vault_password" class="Form-inputLabelContainer">
                        <span class="Form-requiredAsterisk">*</span>
                        <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.VAULT_PASSWORD') }} - {{vault_credential.name}}</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-btn input-group-prepend">
                            <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" ng-attr-id="{{ 'prompt-vault-password_show_input_button-' + $index }}" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-vault-password-' + $index)" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                        </span>
                        <input ng-attr-id="{{ 'prompt-vault-password-' + $index }}" type="password" ng-model="promptData.prompts.credentials.passwords.vault[$index].value" name="vault_password" class="password-field form-control input-sm Form-textInput" required>
                    </div>
                    <div class="error" ng-show="credentialPasswordsForm.vault_password.$dirty && credentialPasswordsForm.vault_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                    <div class="error api-error" ng-bind="vault_password_api_error"></div>
                </div>
        </form>
    </div>
</div>
